<template>
    <div class="repository-container">
        <el-card class="box-card">
            <!-- 第一步：添加仓库分类 -->
            <div v-if="step === 1" class="step-container">
                <div slot="header" class="clearfix">
                    <span>第一步：添加仓库分类</span>
                    <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="skipToStep2">
                        跳过，直接添加仓库
                    </el-button>
                </div>

                <el-form
                    :model="categoryForm"
                    :rules="categoryRules"
                    ref="categoryForm"
                    label-width="120px"
                    class="form-content">

                    <el-form-item label="分类名称" prop="typeName">
                        <el-input
                            v-model="categoryForm.typeName"
                            placeholder="请输入仓库分类名称"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="分类描述" prop="typeDesc">
                        <el-input
                            type="textarea"
                            :rows="3"
                            v-model="categoryForm.typeDesc"
                            placeholder="请输入仓库分类描述">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitCategory">立即创建</el-button>
                        <el-button @click="resetCategoryForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 第二步：添加仓库信息 -->
            <div v-if="step === 2" class="step-container">
                <div slot="header" class="clearfix">
                    <span>第二步：添加仓库信息</span>
                    <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="step = 1">
                        返回修改分类信息
                    </el-button>
                </div>

                <el-form
                    :model="repositoryForm"
                    :rules="repositoryRules"
                    ref="repositoryForm"
                    label-width="120px"
                    class="form-content">

                    <el-form-item label="仓库名称" prop="repositoryName">
                        <el-input
                            v-model="repositoryForm.repositoryName"
                            placeholder="请输入仓库名称"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="仓库地址" prop="repositoryAddress">
                        <el-input
                            v-model="repositoryForm.repositoryAddress"
                            placeholder="请输入仓库地址"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="仓库类型" prop="repositoryId">
                        <el-select
                            v-model="repositoryForm.repositoryId"
                            placeholder="请选择仓库类型"
                            style="width: 100%"
                            filterable>
                            <el-option
                                v-if="newCategoryId"
                                :key="newCategoryId"
                                :label="categoryForm.typeName"
                                :value="newCategoryId">
                                <span style="float: left">{{ categoryForm.typeName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">(新添加)</span>
                            </el-option>
                            <el-option
                                v-for="item in repositoryCategories"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id">
                                <span style="float: left">{{ item.typeName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeDesc }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="库存上限" prop="upperLimit">
                        <el-input-number
                            v-model="repositoryForm.upperLimit"
                            :min="0"
                            :max="1000000"
                            placeholder="请输入库存上限">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="库存下限" prop="lowerLimit">
                        <el-input-number
                            v-model="repositoryForm.lowerLimit"
                            :min="0"
                            :max="repositoryForm.upperLimit"
                            placeholder="请输入库存下限">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="最大存储量" prop="maximumStorage">
                        <el-input-number
                            v-model="repositoryForm.maximumStorage"
                            :min="0"
                            :max="1000000"
                            placeholder="请输入最大存储量">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="仓库描述" prop="content">
                        <el-input
                            type="textarea"
                            :rows="3"
                            v-model="repositoryForm.content"
                            placeholder="请输入仓库描述">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitRepository">完成创建</el-button>
                        <el-button @click="resetRepositoryForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'RepositoryAddWizard',
    data() {
        const validateLowerLimit = (rule, value, callback) => {
            if (value > this.repositoryForm.upperLimit) {
                callback(new Error('库存下限不能大于上限'));
            } else {
                callback();
            }
        };

        return {
            step: 1, // 当前步骤，1为分类，2为仓库
            newCategoryId: null, // 新创建的分类ID
            repositoryCategories: [], // 已有仓库分类列表

            // 分类表单数据
            categoryForm: {
                typeName: '',
                typeDesc: ''
            },

            // 仓库表单数据
            repositoryForm: {
                repositoryName: '',
                repositoryAddress: '',
                repositoryId: '',
                upperLimit: 100,
                lowerLimit: 10,
                maximumStorage: 1000,
                content: '',
            },

            // 分类表单验证规则
            categoryRules: {
                typeName: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                typeDesc: [
                    { required: true, message: '请输入分类描述', trigger: 'blur' },
                    { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
                ]
            },

            // 仓库表单验证规则
            repositoryRules: {
                repositoryName: [
                    { required: true, message: '请输入仓库名称', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                repositoryAddress: [
                    { required: true, message: '请输入仓库地址', trigger: 'blur' },
                    { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
                ],
                repositoryId: [
                    { required: true, message: '请选择仓库类型', trigger: 'change' }
                ],
                upperLimit: [
                    { required: true, message: '请输入库存上限', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值', trigger: 'blur' }
                ],
                lowerLimit: [
                    { required: true, message: '请输入库存下限', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值', trigger: 'blur' },
                    { validator: validateLowerLimit, trigger: 'blur' }
                ],
                maximumStorage: [
                    { required: true, message: '请输入最大存储量', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值', trigger: 'blur' }
                ],
            }
        };
    },
    created() {
        this.fetchRepositoryCategories();
    },
    methods: {
        // 获取已有仓库分类
        fetchRepositoryCategories() {
            this.$axios.post('repository/listRepositoryCategory').then(response => {
                this.repositoryCategories = response.data;
            });
        },

        // 跳过第一步，直接进入第二步
        skipToStep2() {
            this.step = 2;
            this.fetchRepositoryCategories();
        },

        // 提交分类表单
        async submitCategory() {
            this.$refs.categoryForm.validate(valid => {
                if (valid) {
                    this.$axios.post('repository/addRepositoryCategory', this.categoryForm).then(response => {
                        this.$message.success('仓库分类添加成功');
                        this.newCategoryId = response.data.id;
                        this.repositoryForm.repositoryId = this.newCategoryId;
                        this.step = 2; // 跳转到第二步
                        this.fetchRepositoryCategories(); // 刷新分类列表
                    }).catch(error => {
                        this.$message.error('仓库分类添加失败: ' + error.message);
                    });
                } else {
                    this.$message.error('请检查表单填写是否正确');
                    return false;
                }
            });
        },

        // 重置分类表单
        resetCategoryForm() {
            this.$refs.categoryForm.resetFields();
        },

        // 提交仓库表单
        async submitRepository() {
            this.$refs.repositoryForm.validate(valid => {
                if (valid) {
                    this.$axios.post('repository/addRepository', this.repositoryForm).then(() => {
                        this.$message.success('仓库添加成功');
                        this.$router.push('warehouseList'); // 跳转页面
                    }).catch(error => {
                        this.$message.error('仓库添加失败: ' + error.message);
                    });
                } else {
                    this.$message.error('请检查表单填写是否正确');
                    return false;
                }
            });
        },

        // 重置仓库表单
        resetRepositoryForm() {
            this.$refs.repositoryForm.resetFields();
        }
    }
};
</script>

<style scoped>
.repository-container {
    padding: 20px;
}

.box-card {
    max-width: 800px;
    margin: 0 auto;
}

.step-container {
    padding: 20px;
}

.form-content {
    padding: 20px 0;
}

.step-actions {
    margin-top: 20px;
    text-align: center;
}
</style>